<!DOCTYPE html>
<html>
<SCRIPT type="text/javascript" src="lib/js/jquery.js"></SCRIPT>
        <SCRIPT type="text/javascript" src="lib/js/jquery.ui.js"></SCRIPT>
        <SCRIPT type="text/javascript" src="lib/js/jquery.layout-latest.js"></SCRIPT>
        <link rel="stylesheet" type="text/css" href="lib/js/bootstrap.css" media="all">
        <script type="text/javascript" src="lib/js/bootstrap.js"></script>
        <script type="text/javascript" src="lib/js/jquery.dataTables.js"></script>
        <script type="text/javascript" src="lib/js/highcharts.js"></script>
        <script type="text/javascript" src="lib/js/exporting.js"></script>
        <script type="text/javascript" src="lib/jquery.ui.core.js"></script>
        <script type="text/javascript" src="lib/jquery.multiselect.js"></script>
<!--	<script type="text/javascript" src="lib/jspdf.js"></script>
                <script type="text/javascript" src="lib/libs/FileSaver.js/FileSaver.js"></script>
                <script type="text/javascript" src="lib/libs/Blob.js/Blob.js"></script>
                <script type="text/javascript" src="lib/libs/Blob.js/BlobBuilder.js"></script>
                <script type="text/javascript" src="lib/libs/Deflate/deflate.js"></script>
                <script type="text/javascript" src="lib/libs/Deflate/adler32cs.js"></script>
                <script type="text/javascript" src="lib/jspdf.plugin.addimage.js"></script>
                <script type="text/javascript" src="lib/jspdf.plugin.from_html.js"></script>
                <script type="text/javascript" src="lib/jspdf.plugin.ie_below_9_shim.js"></script>
                <script type="text/javascript" src="lib/jspdf.plugin.sillysvgrenderer.js"></script>
                <script type="text/javascript" src="lib/jspdf.plugin.split_text_to_size.js"></script>
                <script type="text/javascript" src="lib/jspdf.plugin.standard_fonts_metrics.js"></script>
-->

        <link rel="stylesheet" href="lib/js/messi.min.css" />
        <link rel="stylesheet" href="lib/css/jquery.multiselect.css" />
        <link rel="stylesheet" href="lib/css/jquery.ui.css" />
<STYLE TYPE="text/css">
<!--
BODY
   {
   padding-left: 50px;
   padding-right: 50px;
   }
-->
</STYLE>

        <script src="lib/js/messi.js"></script>
        <script type="text/javascript" src="js/library_compounds.js"></script>
        <script type="text/javascript" src="js/spectrum.js"></script>
        <script type="text/javascript" src="js/spectrum_annotation.js"></script>
        <script type="text/javascript" src="js/compound_precursor_product.js"></script>
        <script type="text/javascript" src="js/custom_plot.js"></script>
        <script type="text/javascript" src="js/experiment_groups.js"></script>
        <script type="text/javascript" src="js/util.js"></script>
        <script type="text/javascript" src="js/elements.js"></script>
        <script type="text/javascript" src="js/validation.js"></script>
        <script type="text/javascript" src="js/generatevialpos.js"></script>
        <script type="text/javascript" src="js/interactions.js"></script>
<script type="text/javascript">




function layRackControls(_rack_vials, expsamplelabel){
        //initialize array to multiples of 98
        _rack_vials[94] = expsamplelabel + "_Alkanes";
        _rack_vials[95] = "MST";
        _rack_vials[96] = "MOS";
        _rack_vials[97] = "MSTFA";
}

$(document).ready(function(){
	var vars = [], hash;
        var rhashes = window.location.href.split("?")[1];
	var projectname = decodeURI(window.location.href.split("?")[2]);
	var labels = decodeURI(window.location.href.split("?")[3]);
	var rack_vials = rhashes.split(",");
	//temp settings for alkanes
	$("#projectname").html('<font color="blue" size="+2">GCMS Project:' + projectname + '</font>');
	var vialrows = "";
	var headertr = "<tr><th></th><th>1</th><th>15</th><th>29</th><th>43</th><th>57</th><th>71</th><th>85</th></tr>";
//<th>H</th><th>I</th><th>J</th><th>K</th><th>L</th><th>M</th><th>N</th></tr>";
	Date.prototype.ddmmyyyy = function() {
                   var yyyy = this.getFullYear().toString();
                        var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
                        var dd  = this.getDate().toString();
                        return (dd[1]?dd:"0"+dd[0]) +"/" + (mm[1]?mm:"0"+mm[0]) +"/"+ yyyy; // padding
                };
        var dstring = new Date().ddmmyyyy();

	/*var pdfdoc = new jsPDF('p','pt', 'a4', true);
        var specialElementHandlers = {
                '#editor': function (element, renderer) {
                return true;
                }
        };
        $('#pdfcmd').click(function () {
                pdfdoc.fromHTML($('#rackmap').html(), 15, 15, {
                'width': 800,
                'elementHandlers': specialElementHandlers
        	});
		var table = tableToJSON($('#tray0').get(0))
		pdfdoc.cellInitialize();
        	$.each(table, function (i, row){
            		//console.debug(row);
            		$.each(row, function (j, cell){
                		pdfdoc.cell(10, 50,120, 50, cell, i);  // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height
        	    	})	
	        })
	        pdfdoc.save(labels + '_traymap.pdf');
        });
	*/
	 $("#projectname").html('<font color="blue" size="+2">GCMS Project:' + projectname + '</font>');
	var trayct = Math.ceil(rack_vials.length/95);
	$("#rackmsg").html("Total samples:" + (rack_vials.length + trayct) + " with identifier:" + labels);
	var remainder = 0;
	if (rack_vials.length > 98){
		remainder = rack_vials.length%98;
	}else{
		rack_vials[94] = labels + "_Alkanes";
        	rack_vials[95] = "MTBSTFA";
        	rack_vials[96] = "MOX";
        	rack_vials[97] = "MSTFA";
	}
	var table0index = 0
	var t = 0;
	
	for (t = 0; t < trayct; t++){
		var vialrows = "";
		for (var r = 0; r < 14; r++){
                	//for loop to increment by 7, starting at 0, 1, 2, ... 6 14 times, with the first time 1,2,3,..7
                	var rowheader = r+1;
                	var row = "<tr><td>" + rowheader + "</td>";
                	for (var rc = 0; rc <= 6; rc++){
                        	var sample = "";
				var pos = (r + rc*14) + (t*94);
				console.log(pos);
                        	if (rack_vials[pos] != null){
                                	sample = rack_vials[pos];
				}else{
					sample = "";					
				}
				if (pos > (t*94) ){
					pos = pos - 94*t;
					if (pos%94 == 0){
                                		sample = "<font color='#FF3333'>" + labels + "_Alkanes" + "</font>";
                                	}
					if (pos%95 == 0){
                                        	sample = "<font color='#FF3333'>" +"MTBSTFA" + "</font>";
                                	}
					if (pos%96 == 0){
                                        	sample = "<font color='#FF3333'>" +"MOX" + "</font>";
                                	}
					if (pos%97 == 0){
                                        	sample = "<font color='#FF3333'>" +"MSTFA" + "</font>";
					}
				}
                        	row = row + "<td>" + sample + "</td>";
                	}
                	row = row + "</tr>";
                	vialrows = vialrows + row;
        	}
		var traylabel = "<b>Tray " + (t + 1) + " Sample Map</b>"; 
		$("#rackmap").append(traylabel + "<br><table id='tray'" + t + "  border='1' BORDERCOLOR=blue>" + headertr + vialrows + "</table><br>");
	}

});

</script>
<body>
<br>
<p><span id="projectname"></span></p>
<p><span id="rackmsg"></span></p>

<div><input type=button onclick="window.print()" value='Print/PDF'></div>
<div id="rackmap"></div>
<footer style="background-color:#CCFFFF">
<br>  
<b><a href="mailto:christian.jaeger@uni.lu">&nbsp;Question for Metabolomics?</a></b>
  <br>
</footer>
</body>
</html>

